﻿<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="AnalyticsAjax.aspx.cs" Inherits="WebFormsSample.AnalyticsAjax" %>

<%@ Import Namespace="ActivityTrackingLog.Web.Helpers" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        Statistics via AJAX call
    </h2>
    <p>
        Data in the table below is embedded into the page on the CLIENT side
    </p>
    <h2>
        Source code:
    </h2>
    <p>
        <img class="max-width" src="../Img/analytics_ajax_call_example.PNG" />
    </p>
    <h2>
        Working Example:
    </h2>
    <table class="settings">
        <thead>
            <tr>
                <td class="set-width">
                    Entity Type
                </td>
                <td class="set-width">
                    Report Type
                </td>
                <td class="auto-width">
                    Columns (CSV)
                </td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="set-width">
                    <select class="changeable" id="ddlEntityType">
                        <option value="ActivityItem">ActivityItem</option>
                        <option value="UserAgentItem">UserAgentItem</option>
                    </select>
                </td>
                <td class="set-width">
                    <select class="changeable" id="ddlReportType">
                        <option value="list">List</option>
                        <option value="groupedlist">Grouped List</option>
                        <option value="chart">Chart</option>
                    </select>
                </td>
                <td class="auto-width">
                    <input type="text" id="txtColumns" value="" />
                </td>
            </tr>
            <tr>
                <td colspan="5">
                    <input type="button" id="btnReload" value="Reload Data" />
                </td>
            </tr>
        </tbody>
    </table>
    <h2>
        Control Output:
    </h2>
    <div class="margin-top" id="statistics_control_container">
    </div>
    <script type="text/javascript">
        $(function () {
            logClientSideActivity('AnalyticsAPILoaded');

            $('.changeable').change(function () { fillColumns(); });
            $('#btnReload').click(function () { loadControl(); });
            $(document).bind("reload_report_control", function (event) {
                var reportCriteria = event.originalEvent.reportCriteria;
                loadControl(reportCriteria);
            });

            fillColumns();
            loadControl();
        })

        function fillColumns() {
            var entityType = $('#ddlEntityType option:selected').val();
            var reportType = $('#ddlReportType option:selected').val();
            var cols = "";

            switch (reportType) {
                case 'list':
                    cols = entityType == 'ActivityItem' ?
                        'Sequence,TimeUtc,ActivityType,Category,Activity,UserKey,ClientHost,PageUrl' :
                        'Sequence,Hash,AgentString';
                    break;
                case 'groupedlist':
                    cols = entityType == 'ActivityItem' ?
                        'ActivityType,Category,Activity,PageUrl,Count' :
                        'Hash,AgentString,Count';
                    break;
                case 'chart':
                    cols = '';
                    break;
            }

            $('#txtColumns').val(cols);
        }

        function loadControl(reportCriteria) {
            // reportCriteria keeps report criteria when paging and sorting is executing
            var data = null;
            if (reportCriteria)
                data = reportCriteria;
            else
                data = {};

            // replace selected by user params
            data.entity = $('#ddlEntityType option:selected').val();
            data.view = 'control';
            data.report = $('#ddlReportType option:selected').val();
            data.cols = $('#txtColumns').val();

            $("#statistics_control_container")
                .load("/ActivityAnalytics/ActivityAnalyticsUI.axd", data);
        }
    </script>
</asp:Content>
